<template>
  <div>
    <ul>
      <li v-for="(item, indexs) in list" :key="indexs">
        <div class="reply-item">
          <div class="reply-img">
            <img :src="item.uimg" alt="" />
          </div>
          <div class="reply-bottom">
            <div class="reply-name">
              {{ item.uname }}
              <span class="replyss" v-if="item.toname">
                @ {{ item.toname }}</span
              >
            </div>
            <div class="reply-text">
              {{ item.grContent }}
            </div>
            <div class="reply-some">
              <div class="reply-time">{{ item.grStatetime }}</div>
              <div class="reply-caoz">
                <!-- <div class="reply-dian">
                  <img src="../../../../assets/img/ndianz.svg" alt="" />
                  <img src="../../../../assets/img/dianz.svg" alt="" />
                  <span>{{ item.grNumber }}</span>
                </div>
                <div class="shu2">|</div> -->
                <div class="reply-hui" @click="displayReply(indexs, item.uid)">
                  <img src="../../../../assets/img/hui.svg" alt="" />
                  <span>回复</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="fenye" :class="{ nonefy: reTotal <= 10 }">
      <el-pagination
        small
        layout="prev, pager, next"
        page-size="10"
        :total="reTotal"
        :currentPage="curPage"
        @current-change="rePage"
      >
      </el-pagination>
    </div>

    <div
      class="reply-message"
      :class="{ fabuactive: indexs2 == indexR && pianduan == 2 }"
    >
      <el-input
        ref="commre"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 6 }"
        :placeholder="inputPla"
        v-model="textarea"
      >
      </el-input>

      <div class="fabu" @click="fabu">发布</div>
    </div>
  </div>
</template>

<script>
import { replyComments, addGamereview } from "../../../../network/showGame";

export default {
  name: "CommReply",
  props: {
    cid: {
      type: Number,
    },
    pianduan: {
      type: Number,
    },
  },
  data() {
    return {
      list: "",
      reTotal: 5,
      curPage: 1,
      textarea: "",
      indexR: -1,
      indexs2: "",
      inputPla: "",
      gid: window.location.pathname.split("/")[2],
      uid: this.$Cookie.get("userid"),
      repUid: "",
    };
  },
  created() {
    this.getMessage();
  },

  computed: {
    monitor() {
      return this.$store.state.userReply;
    },
  },

  watch: {
    monitor() {
      this.getMessage().then((res) => {
        console.log(res);
      });
    },
  },

  methods: {
    getMessage() {
      replyComments(this.cid, this.curPage).then((res) => {
        this.reTotal = res.data.data.total;
        this.list = res.data.data.list;
        console.log(this.list, res.data.data);
      });
    },

    displayReply(index, uid) {
      this.indexs2 = index;
      this.indexR = index;
      this.repUid = uid;
      this.inputPla = "回复@" + this.list[index].uname + ":";
      this.$emit("changPuan", 2);
      console.log(this.list[index].uname, this.list);
      this.textarea = "";
      this.$nextTick(() => {
        this.$refs.commre.focus();
      });
    },

    rePage(currentPage) {
      this.curPage = currentPage;
      this.getMessage();
      this.indexR = -1;
    },

    fabu() {
      if (this.uid == null) {
        this.$confirm("未登录,是否进行登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        addGamereview(
          this.cid,
          this.gid,
          this.textarea,
          this.repUid,
          this.uid
        ).then((res) => {
          this.getMessage();
          this.indexR = -1;
          console.log(res);
        });
      }
    },
  },
};
</script>

<style>
.replyss {
  font-weight: normal;
}
</style>